

let BaseView = require('../BaseView');

let templateDiv = `
    <label>动画模板</label>
    <div id="res_animTemp">
        <div class="res_anim_item" draggable="true" data-key="RotateBy">相对旋转</div>
        <div class="res_anim_item" draggable="true" data-key="ScaleTo">绝对缩放</div>
        <div class="res_anim_item" draggable="true" data-key="MoveBy">相对平移</div>
    </div>
`;

let UIConstants = require('../ui_constants');
let settings = require('../../settings');

class AnimTempView extends  BaseView{
    constructor(){
        super();

        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('border');
        this.rootEl.innerHTML = templateDiv;

        this.contentEl = this.rootEl.querySelector('#res_animTemp');

        // 给每一个添加上一个托拽事件
        for(let i = 0,len = this.contentEl.children.length; i < len; ++i){
            let itemEl = this.contentEl.children[i];
            let dataKey = itemEl.getAttribute('data-key');
            console.log(`dataKey:${dataKey}`);
            itemEl.addEventListener('dragstart',(e)=>{
                let selectedSp = editor.getInspectView().getSelectedSp();
                if(selectedSp.isBattery()){
                    settings.alert('炮台不能添加动画...');
                    return;
                }
                e.dataTransfer.setData('template_anim',UIConstants.AnimTemplate[dataKey]);
            },false);
        }
    }
}

module.exports = AnimTempView;
